<template>
  <div class="container">
    <el-container>
      <!-- 头部 -->
      <el-header class="el-header">题库管理系统</el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-col :span="12" :style="{ 'width': '200px' }">
          <el-menu default-active="home" class="el-menu-vertical-demo" @select="handleMenuSelect">
            <el-menu-item index="home">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item  index="user">
              <i class="el-icon-setting"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>

            <el-menu-item  index="Carousel">
              <i class="el-icon-setting"></i>
              <span slot="title">轮播图管理</span>
            </el-menu-item>

            <el-menu-item  index="tiku">
              <i class="el-icon-setting"></i>
              <span slot="title">题库管理</span>
            </el-menu-item>

            <el-menu-item index="logout">
              <i class="el-icon-switch-button"></i>
              <span slot="title">退出登录</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <!-- 主要内容 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>

      欢迎登录题库管理系统
    </el-container>
  </div>
</template>

<script>


export default {
  data() {
    return {

    };
  },
  methods: {
    handleMenuSelect(index) {
      const targetPath = '/' + index;

      // 判断目标路径是否与当前路径相同
      // 通过 this.$route.path 获取到当前路由的路径
      if (this.$route.path === targetPath) {
        // 如果相同则不进行导航
        return;
      }

      // 否则进行导航
      this.$router.push({ path: targetPath });
    },
    handleMenuSelect(index) {
      if (index === 'logout') {
        this.handleLogout();
      } else {
        const targetPath = '/' + index;
        // 判断目标路径是否与当前路径相同
        if (this.$route.path !== targetPath) {
          this.$router.push({ path: targetPath });
        }
      }
    },
    handleLogout() {
      // 清除本地存储中的 token
      localStorage.removeItem('token');
      // 重定向到登录页面
      this.$router.push({ name: 'login' });
    },
    checkLoginStatus() {
      const token = localStorage.getItem('token');
      console.log('登录 token 信息:', token);
      if (!token) {
        // 如果没有 token，则重定向到登录页面
        this.$router.push({ name: 'login' });
      }
    }
  },
  mounted() {
    this.checkLoginStatus();  // 页面加载时，检查用户登录状态

    
    const token = localStorage.getItem('token');
      console.log('登录 token 信息:', token);
  }
};
</script>

<style scoped>
.container {
  margin: 0 auto;
  overflow: hidden;
  /* 防止容器内部出现滚动 */
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
  font-size: 28px;
}

.el-aside {
  text-align: center;
}

.el-main {
  height: calc(100vh - 60px);
  /* 根据头部的高度计算主内容区的高度 */
  background-color: #E9EEF3;
  overflow-y: auto;
  /* 允许内容溢出时滚动 */
}

body>.el-container {
  /* margin-bottom: 40px; */
}
</style>
